
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-dianji"></i>
                    <div class="name">点击</div>
                    <div class="fontclass">.icon-dianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangluoxinhao"></i>
                    <div class="name">网络信号</div>
                    <div class="fontclass">.icon-wangluoxinhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-task-search"></i>
                    <div class="name">查询任务</div>
                    <div class="fontclass">.icon-msnui-task-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-motuoche"></i>
                    <div class="name">摩托车</div>
                    <div class="fontclass">.icon-motuoche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaoxiangji"></i>
                    <div class="name">照相机</div>
                    <div class="fontclass">.icon-zhaoxiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifuchaoshi"></i>
                    <div class="name">分期－支付超时</div>
                    <div class="fontclass">.icon-zhifuchaoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-signal2xinhao"></i>
                    <div class="name">signal2-信号</div>
                    <div class="fontclass">.icon-signal2xinhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqian"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-biaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongzhonghao"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-gongzhonghao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjian"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-wenjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhizuobiaozhun17"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-iconfontzhizuobiaozhun17</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saoyisao1"></i>
                    <div class="name">扫一扫 </div>
                    <div class="fontclass">.icon-saoyisao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sanjiaoxing-up"></i>
                    <div class="name">三角形-up</div>
                    <div class="fontclass">.icon-sanjiaoxing-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanliyuan"></i>
                    <div class="name">管理员</div>
                    <div class="fontclass">.icon-guanliyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie00"></i>
                    <div class="name">链接00</div>
                    <div class="fontclass">.icon-lianjie00</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">qq</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_gerenzhongxin"></i>
                    <div class="name">icon_个人中心</div>
                    <div class="fontclass">.icon-icon_gerenzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-qihuan"></i>
                    <div class="name">切换</div>
                    <div class="fontclass">.icon-icon-qihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuangjiantou"></i>
                    <div class="name">双箭头</div>
                    <div class="fontclass">.icon-shuangjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xialasanjiao"></i>
                    <div class="name">下拉三角</div>
                    <div class="fontclass">.icon-xialasanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guiji"></i>
                    <div class="name">轨迹</div>
                    <div class="fontclass">.icon-guiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-file"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-file</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjian"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.icon-youjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoudiantongguan"></i>
                    <div class="name"> 手电筒 关</div>
                    <div class="fontclass">.icon-shoudiantongguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei5"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhaopian"></i>
                    <div class="name">照片</div>
                    <div class="fontclass">.icon-zhaopian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juxing"></i>
                    <div class="name">矩形</div>
                    <div class="fontclass">.icon-juxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei4"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon--"></i>
                    <div class="name">信封</div>
                    <div class="fontclass">.icon-icon--</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-4"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-icon-4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-5"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-icon-5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifixinhao"></i>
                    <div class="name">wifi信号</div>
                    <div class="fontclass">.icon-wifixinhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--"></i>
                    <div class="name">未标题-1-03</div>
                    <div class="fontclass">.icon-weibiaoti--</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti-_huaban"></i>
                    <div class="name">系统管理</div>
                    <div class="fontclass">.icon-weibiaoti-_huaban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--1"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-weibiaoti--1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--2"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-weibiaoti--2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--3"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-weibiaoti--3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--4"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-weibiaoti--4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--5"></i>
                    <div class="name">向下箭头</div>
                    <div class="fontclass">.icon-weibiaoti--5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--6"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-weibiaoti--6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--7"></i>
                    <div class="name">重大产业</div>
                    <div class="fontclass">.icon-weibiaoti--7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--8"></i>
                    <div class="name">收起</div>
                    <div class="fontclass">.icon-weibiaoti--8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--9"></i>
                    <div class="name">打印</div>
                    <div class="fontclass">.icon-weibiaoti--9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--10"></i>
                    <div class="name">招商引资</div>
                    <div class="fontclass">.icon-weibiaoti--10</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--11"></i>
                    <div class="name">任务管理</div>
                    <div class="fontclass">.icon-weibiaoti--11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--12"></i>
                    <div class="name">督办管理-单位管理</div>
                    <div class="fontclass">.icon-weibiaoti--12</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--13"></i>
                    <div class="name">未标题-1-16</div>
                    <div class="fontclass">.icon-weibiaoti--13</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--14"></i>
                    <div class="name">工程建设</div>
                    <div class="fontclass">.icon-weibiaoti--14</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--15"></i>
                    <div class="name">新增用地</div>
                    <div class="fontclass">.icon-weibiaoti--15</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--16"></i>
                    <div class="name">收储土地</div>
                    <div class="fontclass">.icon-weibiaoti--16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--17"></i>
                    <div class="name">土地供应</div>
                    <div class="fontclass">.icon-weibiaoti--17</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--18"></i>
                    <div class="name">权限管理</div>
                    <div class="fontclass">.icon-weibiaoti--18</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--19"></i>
                    <div class="name">用户管理</div>
                    <div class="fontclass">.icon-weibiaoti--19</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--20"></i>
                    <div class="name">全市动态</div>
                    <div class="fontclass">.icon-weibiaoti--20</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--21"></i>
                    <div class="name">待办</div>
                    <div class="fontclass">.icon-weibiaoti--21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--22"></i>
                    <div class="name">消息中心</div>
                    <div class="fontclass">.icon-weibiaoti--22</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--23"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-weibiaoti--23</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--24"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.icon-weibiaoti--24</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--25"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-weibiaoti--25</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--26"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-weibiaoti--26</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--27"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-weibiaoti--27</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--28"></i>
                    <div class="name">开关</div>
                    <div class="fontclass">.icon-weibiaoti--28</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--29"></i>
                    <div class="name">开关</div>
                    <div class="fontclass">.icon-weibiaoti--29</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--30"></i>
                    <div class="name">删除-</div>
                    <div class="fontclass">.icon-weibiaoti--30</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--31"></i>
                    <div class="name">未标题-1-30</div>
                    <div class="fontclass">.icon-weibiaoti--31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--32"></i>
                    <div class="name">全市动态</div>
                    <div class="fontclass">.icon-weibiaoti--32</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--33"></i>
                    <div class="name">固定投资</div>
                    <div class="fontclass">.icon-weibiaoti--33</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--34"></i>
                    <div class="name">GDP指数</div>
                    <div class="fontclass">.icon-weibiaoti--34</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--35"></i>
                    <div class="name">财税指标</div>
                    <div class="fontclass">.icon-weibiaoti--35</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--36"></i>
                    <div class="name">工业产值</div>
                    <div class="fontclass">.icon-weibiaoti--36</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--37"></i>
                    <div class="name">人均可支配</div>
                    <div class="fontclass">.icon-weibiaoti--37</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--38"></i>
                    <div class="name">统计报表</div>
                    <div class="fontclass">.icon-weibiaoti--38</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--39"></i>
                    <div class="name">社会消费品</div>
                    <div class="fontclass">.icon-weibiaoti--39</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--40"></i>
                    <div class="name">重点工程</div>
                    <div class="fontclass">.icon-weibiaoti--40</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--41"></i>
                    <div class="name">重点事项</div>
                    <div class="fontclass">.icon-weibiaoti--41</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--42"></i>
                    <div class="name">四个一万亩</div>
                    <div class="fontclass">.icon-weibiaoti--42</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--43"></i>
                    <div class="name">经济指标</div>
                    <div class="fontclass">.icon-weibiaoti--43</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--44"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-weibiaoti--44</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--45"></i>
                    <div class="name">产业建设年</div>
                    <div class="fontclass">.icon-weibiaoti--45</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti--46"></i>
                    <div class="name">农业产值</div>
                    <div class="fontclass">.icon-weibiaoti--46</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-"></i>
                    <div class="name">icon-49</div>
                    <div class="fontclass">.icon-icon-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-1"></i>
                    <div class="name">icon-52</div>
                    <div class="fontclass">.icon-icon-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-2"></i>
                    <div class="name">icon-50</div>
                    <div class="fontclass">.icon-icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-3"></i>
                    <div class="name">icon-51</div>
                    <div class="fontclass">.icon-icon-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoulu"></i>
                    <div class="name">走路</div>
                    <div class="fontclass">.icon-zoulu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-_huaban"></i>
                    <div class="name">00_画板 1</div>
                    <div class="fontclass">.icon-_huaban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changzhurenyuan"></i>
                    <div class="name">常住人员</div>
                    <div class="fontclass">.icon-changzhurenyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiashirenxinxi"></i>
                    <div class="name">驾驶人信息</div>
                    <div class="fontclass">.icon-jiashirenxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danweixinxi"></i>
                    <div class="name">单位信息</div>
                    <div class="fontclass">.icon-danweixinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangwuxinxi"></i>
                    <div class="name">房屋信息</div>
                    <div class="fontclass">.icon-fangwuxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliangxinxi"></i>
                    <div class="name">车辆信息</div>
                    <div class="fontclass">.icon-cheliangxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renkouxinxi"></i>
                    <div class="name">人口信息</div>
                    <div class="fontclass">.icon-renkouxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyinhuyi"></i>
                    <div class="name">语音互译</div>
                    <div class="fontclass">.icon-yuyinhuyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuezhonghuyi"></i>
                    <div class="name">越中互译</div>
                    <div class="fontclass">.icon-yuezhonghuyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanzhurenyuan"></i>
                    <div class="name">暂住人员</div>
                    <div class="fontclass">.icon-zanzhurenyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuzhurenyuan"></i>
                    <div class="name">租住人员</div>
                    <div class="fontclass">.icon-zuzhurenyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shaixuan"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-shaixuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaosonggeiwode"></i>
                    <div class="name">抄送给我的</div>
                    <div class="fontclass">.icon-chaosonggeiwode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodeshenpi"></i>
                    <div class="name">我的审批</div>
                    <div class="fontclass">.icon-wodeshenpi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wofaqide"></i>
                    <div class="name">我发起的</div>
                    <div class="fontclass">.icon-wofaqide</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lishi"></i>
                    <div class="name">历史</div>
                    <div class="fontclass">.icon-lishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei1"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei2"></i>
                    <div class="name">定位1</div>
                    <div class="fontclass">.icon-dingwei2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei3"></i>
                    <div class="name">定位2</div>
                    <div class="fontclass">.icon-dingwei3</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
